<!---
  @author: andy
  @description: 菜单组件
-->
<template>
  <div class="layout-menu">
    <a-menu mode="inline" :inline-indent="12">
      <template v-for="item in accessStore.accessMenus" :key="item.name">
        <template v-if="item.children.length === 0">
          <a-menu-item :key="item.name">
            <template #icon>
              <img v-if="item.icon" class="menu-icon" :src="item.icon" />
            </template>
            {{item.name}}
          </a-menu-item>
        </template>
        <template v-else>
          <a-sub-menu :key="item.name">
            <template #icon>
              <img v-if="item.icon" class="menu-icon" :src="item.icon" />
            </template>
            <template #title>{{item.name}}</template>
            <template v-for="menu in item.children" :key="menu.name">
              <template v-if="menu.children.length === 0">
                <a-menu-item :key="menu.name">
                  <template #icon>
                    <img v-if="item.icon" class="menu-icon" :src="item.icon" />
                  </template>
                  {{menu.name}}
                </a-menu-item>
              </template>
              <template v-else>
                <SubMenu :menu="menu" />
              </template>
            </template>
          </a-sub-menu>
        </template>
      </template>
    </a-menu>
  </div>
</template>
<script lang='ts' setup>
import { useAccessStore } from '@/stores/access/access';
import SubMenu from './SubMenu.vue';
const accessStore = useAccessStore();
</script>
<style lang='less' scoped>
.layout-menu {
  height: 100%;
  .menu-icon {
    width: 0.16rem;
    height: 0.16rem;
    object-fit: cover;
  }
}
</style>